<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery Loader Plugin Demos</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/loading/Simple-jQuery-Loading-Spinner-Overlay-Plugin-Loader.html">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<form class="form-horizontal" role="form" style="width: 600px;margin: 150px auto;">
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <h1>jQuery Loader Plugin Demos</h1>
        </div>
    </div>
    <div class="form-group">
        <label for="autoCheck" class="col-sm-2 control-label">Auto check container</label>

        <div class="col-sm-10">
            <div class="checkbox">
                <input id="autoCheck" type="checkbox" checked="checked" style="margin-left: 0"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="isOnly" class="col-sm-2 control-label">Multiple loaders</label>

        <div class="col-sm-10">
            <div class="checkbox">
                <input id="isOnly" type="checkbox" style="margin-left: 0"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="size" class="col-sm-2 control-label">Size</label>

        <div class="col-sm-10">
            <select id="size" class="form-control" style="width: 50px">
                <option value="16">16</option>
                <option value="32">32</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="bgColor" class="col-sm-2 control-label">Background color</label>

        <div class="col-sm-10">
            <input id="bgColor" class="form-control" value="#FFF" style="width: 100px;display: inline-block;">
        </div>
    </div>
    <div class="form-group">
        <label for="bgOpacity" class="col-sm-2 control-label">Background opacity</label>

        <div class="col-sm-10">
            <select id="bgOpacity" class="form-control" style="width: 80px" value="0.5">
                <option value="0.5">0.5</option>
                <option value="0.3">0.3</option>
                <option value="0.7">0.7</option>
                <option value="0.9">0.9</option>
                <option value="1.0">1.0</option>
                <option value="0">0</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="title" class="col-sm-2 control-label">Loading text</label>

        <div class="col-sm-10">
            <input id="title" class="form-control" value="" style="width: 150px;">
        </div>
    </div>
    <div class="form-group">
        <label for="fontColor" class="col-sm-2 control-label">Text color</label>

        <div class="col-sm-10">
            <input id="fontColor" class="form-control" value="#000" style="width: 100px;">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-default" data-target="body">Fullscreen</button>
            <button type="button" class="btn btn-default" data-target="self">Self</button>
            <button type="button" class="btn btn-default" data-target="form">Form</button>
            <button type="button" class="btn btn-danger" data-target="close" style="position: relative;z-index: 11000;">Close</button>
        </div>
    </div>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery-loader.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('button').on('click', function () {
            $data = {
                autoCheck: $('#autoCheck').is(':checked') ? 32 : false,
                size: $('#size').val(),  //指定菊花大小
                bgColor: $('#bgColor').val(),   //背景颜色
                bgOpacity: $('#bgOpacity').val(),    //背景透明度
                fontColor: $('#fontColor').val(),  //文字颜色
                title: $('#title').val(), //文字
                isOnly: !$('#isOnly').is(':checked')
            };
            switch ($(this).data('target')){
                case 'body':
                    $.loader.open($data);
                    break;
                case 'self':
                    $(this).loader($data);
                    break;
                case 'form':
                    $('form').loader($data);
                    break;
                case 'close':
                    $.loader.close(true);

            }
        });
    })
</script><script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>